<template>
	<div class="manage">
		<div class="manage_content">
			<div class="search_wrap">
				<el-select v-model="query.roleid" placeholder="角色" clearable>
					<el-option label="超级管理员" value="1"></el-option>
					<el-option label="辅导员" value="2"></el-option>
					<el-option label="院系管理员" value="3"></el-option>
				</el-select>
				<el-input v-model="query.name" placeholder="操作员" clearable></el-input>
				<el-input v-model="query.sno" placeholder="学号" clearable></el-input>
				<el-button @click="searchHandle" type="primary">搜索</el-button>
				<el-button @click="addHandle" type="primary"><i class="el-icon-circle-plus"></i> 新增操作员</el-button>
				<el-button @click="upLoadBtn" type="success"><i class="el-icon-upload2"></i> 批量导入辅导员</el-button>
				<el-button @click="upLoadBtn2" type="success"><i class="el-icon-upload2"></i> 批量导入院系管理员</el-button>
				<el-upload style="display: none;" action="" :on-change="handleChange" :limit="1" :auto-upload="false">
					<el-button id="upload_el" type="primary">批量导入辅导员</el-button>
				</el-upload>
				<el-upload style="display: none;" action="" :on-change="handleChange2" :limit="1" :auto-upload="false">
					<el-button id="upload_el2" type="primary">批量导入院系管理员</el-button>
				</el-upload>
			</div>
			<!-- 表格 -->
			<template>
				<el-table :data="tableData" border style="width: 100%" stripe class="my_table">
					<el-table-column prop="name" label="操作员">
					</el-table-column>
					<el-table-column prop="sno" label="学号">
					</el-table-column>
					<el-table-column label="角色">
						<template slot-scope="scope">
							<span>{{getRole(scope.row.roleid)}}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<el-button v-if="scope.row.roleid!=1" @click="deleteHandle(scope.row)" type="danger" size="small"><i class="el-icon-delete"></i></el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<!-- 分页 -->
			<div class="pagination_wrap">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query.page" :page-size="query.size" background layout="sizes, prev, pager, next, total" :total="total">
				</el-pagination>
			</div>
			<!-- 增加 -->
			<el-dialog title="新增操作员" :visible.sync="dialogVisible" width="30%" center>
				<el-form :model="addData" :rules="rules" ref="ruleForm" label-position="right" label-width="100px">
					<el-form-item label="学号" prop="sno">
						<el-select v-model="addData.id" filterable remote reserve-keyword placeholder="请输入学号" :remote-method="remoteMethod" :loading="remoteSelectLoading">
							<el-option v-for="item in synBySno" :key="item.sno" :label="item.sno" :value="item.sno">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="角色" prop="roleid" label-width="100px">
						<el-select v-model="addData.roleid" placeholder="请选择角色" clearable>
							<el-option v-for="item in authList" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="姓名" prop="name" label-width="100px">
						<el-input v-model="addData.name" placeholder="请输入姓名" :disabled="true"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </span>
			</el-dialog>

		</div>
	</div>
</template>

<script>
	export default {
		name: "manager",
		data() {
			return {
				synBySno: [], //返回匹配的学号
				remoteSelectLoading: false,
				dialogVisible: false, //添加弹窗
				tableData: [],
				total: 0,
				authList: [{
					value: 1,
					label: '超级管理员',
					disabled: true
				}, {
					value: 2,
					label: '辅导员'
				}, {
					value: 3,
					label: '院系管理员'
				}],
				addData: {
					sno: '', //学号
					name: '',
					roleid: '', //角色id
				},
				rules: { //校验
					sno: [{
						required: true,
						message: '请输入学号',
						trigger: 'blur'
					}],
					roleid: [{
						required: true,
						message: '请选择角色',
						trigger: 'change'
					}],
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
				},
				query: { //搜索字段
					sno: '',
					page: 1,
					size: 10,
					name: '', //姓名
					roleid: '', //超级管理员：1，操作员2，院系管理员：3
				},
				my_user: {}

			};
		},
		created() {
			this.GetTaleList();
			let my_user = localStorage.getItem("my_user");
			if(my_user) {
				this.my_user = JSON.parse(my_user);
			}
		},
		methods: {
			upLoadBtn() {
				let eleNav = document.getElementById('upload_el')
				eleNav.click();
			},
			upLoadBtn2() {
				let eleNav = document.getElementById('upload_el2')
				eleNav.click();
			},
			//操作员 type:1
			//上传文件时处理方法  
			handleChange(file) {
				let that = this;
				if(!file.name) {
					this.$message({
						type: 'error',
						message: '请上传表格数据！'
					})
					return false;
				}
				let formData = new FormData();
				formData.append("file", file.raw, Date.now() + ".xlsx");
				formData.append("type", 2);
				that.postAxios("/Operator/AddByExcelInput?type=2", formData, true).then((res) => {
					if(res.code == 0) {
						that.$notify({
							title: '提示',
							message: res.msg,
							type: 'success'
						});
					} else {
						that.$notify.error({
							title: '错误',
							message: res.msg
						});
					}
					that.$router.go(0);
				})
			},
			//院系管理员 type:2
			//上传文件时处理方法  
			handleChange2(file) {
				let that = this;
				if(!file.name) {
					this.$message({
						type: 'error',
						message: '请上传表格数据！'
					})
					return false;
				}
				let formData = new FormData();
				formData.append("file", file.raw, Date.now() + ".xlsx");
				formData.append("type", 3);
				that.postAxios("/Operator/AddByExcelInput?type=3", formData, true).then((res) => {
					if(res.code == 0) {
						that.$notify({
							title: '提示',
							message: res.msg,
							type: 'success',
							onClose:function(){
								that.$router.go(0);
							}
						});
					} else {
						that.$notify.error({
							title: '错误',
							message: res.msg
						});

					}

				})
			},
			//通过roleid获取角色
			getRole(roleid) {
				let that = this;
				let rt = '未知';
				for(let i = 0; i < that.authList.length; i++) {
					if(that.authList[i].value == roleid) {
						rt = that.authList[i].label;
						break;
					}
				}
				return rt;
			},
			//下拉输入框远程方法
			remoteMethod(query) {
				let that = this;
				if(query !== '') {
					this.remoteSelectLoading = true;
					setTimeout(() => {
						that.addData.sno = query;
						that.searchSyn();
					}, 200);
				} else {
					this.synBySno = [];
				}
			},
			//通过学号获取学生信息
			searchSyn() {
				let that = this;
				that.postAxios("/Syn/GetSynBySno?sno=" + that.addData.sno, {
					sno: that.addData.sno
				}).then((res) => {
					if(res.code == 0) {
						that.remoteSelectLoading = false;
						if(res.data.sno && res.data.name) {
							that.addData.name = res.data.name;
							that.synBySno.push(res.data);
						}
					}
				})
			},
			//搜索
			searchHandle() {
				this.query.page = 1;
				this.query.size = 10;
				this.GetTaleList();
			},
			//获取表格数据
			GetTaleList() {
				let that = this;
				let roleid = 0;
				if(that.query.roleid) {
					roleid = that.query.roleid;
				}
				that.postAxios("/Operator/Page", {
					"PageInfo": {
						"pageIndex": that.query.page,
						"pageSize": that.query.size
					},
					"Conditions": {
						"name": that.query.name,
						"sno": that.query.sno,
						"roleid": roleid,
					}
				}).then((res) => {
					if(res.code == 0) {
						that.tableData = res.page.data;
						that.total = res.page.count;
					}
				})
			},
			//分页
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.query.size = val;
				this.GetTaleList();
			},
			//分页
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.query.page = val;
				this.GetTaleList();
			},
			//添加
			addHandle() {
				this.dialogVisible = true;
			},
			//删除
			deleteHandle(row) {
				let that = this;
				this.$confirm('此操作将永久删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.postAxios("/Operator/DelOpt?sno="+row.sno, {sno: row.sno}).then((res) => {
						if(res.code == 0) {
							that.$notify({
								title: '成功',
								message: '操作成功',
								type: 'success'
							});
							that.GetTaleList();
						} else {
							that.$notify.error({
								title: '错误',
								message: '操作失败'
							});
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//新增数据
			submitForm(formName) {
				let that = this;
				this.$refs[formName].validate((valid) => {
					if(valid) {
						that.postAxios("/Operator/AddOperator", that.addData).then((res) => {
							if(res.code == 0) {
								that.$notify({
									title: '成功',
									message: '操作成功',
									type: 'success'
								});
								that.GetTaleList();
							} else {
								that.$notify.error({
									title: '错误',
									message: '操作失败'
								});
							}
							that.dialogVisible = false;
						})
					} else {
						console.log('error submit!!');
					}
				});
			},
		}
	};
</script>

<style scoped lang="scss">
	.w400 {
		width: 400px;
	}
	
	.manage {
		height: 100%;
		width: 100%;
	}
	
	.manage_content {
		.search_wrap {
			padding: 10px 0px;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
		.search_wrap .el-input,
		.search_wrap .el-select {
			width: 200px;
			margin: 5px 10px 5px 0;
		}
		.search_wrap .el-button {
			/*margin: 0 10px 10px 0;*/
		}
		.my_table {}
		.pagination_wrap {
			background: #fff;
			padding: 30px 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
</style>